<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>千园千变，万班万课</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body data-type="generalComponents">
<div class="tpl-portlet-components">
    <div class="portlet-title">
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">Amaze UI CSS</a></li>
            <li class="am-active">文字列表</li>
        </ol>
        <button class="refresh_btn"><i class="am-icon-refresh"></i></button>
    </div>
    <div class="tpl-block">
        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-9"></div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group am-input-group-sm">
                    <input type="text" id="search" class="am-form-field" placeholder="请输入关键字">
                    <span class="am-input-group-btn">
                        <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search"
                                type="button" id="searchBtn"></button>
                    </span>
                </div>
            </div>
        </div>
        <div class="am-g" style="margin-top: 20px">
            <div class="am-u-sm-12">
                <table class="am-table am-table-striped am-table-hover table-main  scroll-table am-table-bd table-center "
                       id="table">
                    <thead>
                    <tr>
                        <th class="table-id" width="120">订单号/微信流水号</th>
                        <th class="table-title">支付状态</th>
                        <th class="table-title">学校名称</th>
                        <th class="table-type">金额</th>
                        <th class="table-author ">支付时间</th>
                        <th class="table-author ">状态</th>
                        <th class="table-author ">每周课程数量</th>
                        <th >服务码/实际服务码</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div class="am-cf">
                    <div class="am-fr">
                        <div class="am-pagination tpl-pagination" id="pagination"></div>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>
<div class="am-g tpl-amazeui-form model_panel" id="editOrderPanel" style="display: none">
    <div class="am-u-sm-12">
        <form class="am-form am-form-horizontal">
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">订单号</label>
                <div class="am-u-sm-9 line">
                    <b id="order_number" class="am-form-label"></b>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">学校名称</label>
                <div class="am-u-sm-9 line">
                    <b id="school_name" class="am-form-label"></b>
                </div>
            </div>
            <div class="am-form-group">
                <label for="serve_code" class="am-u-sm-3 am-form-label">服务码</label>
                <div class="am-u-sm-9">
                    <input type="number"   id="serve_code" name="serve_code" style="width: 300px"
                           placeholder="输入服务码">
                </div>
            </div>
        </form>
    </div>
</div>
<!--服务商-->
<div id="serveContent">
    <p><label>联系方式：</label> <b id="username">阿斯蒂芬</b></p>
    <p><label>联系人姓名：</label> <b id="name">阿斯蒂芬</b></p>
    <p><label>机构名称：</label> <b id="institution_name">123123</b></p>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/layer.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<script src="assets/js/md5.min.js"></script>
<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/js/jquery.serializejson.min.js"></script>
<script src="assets/js/request.js"></script>
<script src="assets/js/verification.js"></script>
<script src="assets/js/app.js"></script>
</body>
<script>
var page = '1'
var size = '10'
var search = ''
var type = ''
var classV = ''
var val = ''
var total = 0
var listData = null
function getDataList (callback) {
  AjaxRequest({
    url: '/admin/my_order/',
    data: {page, size, search},
    succFun: function (res) {
      var data = res.data
      total = data.count
      var html = ''
      listData = res.data.list
      listData.forEach(function (d, i) {
        html += ` <tr>
                    <td>${d.order_number} <br> ${d.weixin_order_id}</td>
                     <td>
                         <span
                            class="am-badge am-badge-${d.order_state == 1 ? 'success' : 'warning'}  am-btn-xs order_status_btn"
                            data-id="${d.order_id}"
                            data-state="${d.order_state}">${d.order_state == 1 ? '已支付' : '未支付'}</span>
                    </td>
                    <td>${d.school_name}</td>
                    <td>${d.money}</td>
                    <td>${d.pay_time}</td>
                    <td>
                      <span
                            class="am-badge am-badge-${d.state == 1 ? 'success' : 'default'}"
                            data-state="1"
                            data-state="0">${d.state == 1 ? '正常' : '过期'}</span>
                    </td>
                    <td>${d.class_num}个班+每周${d.course}节课</td>
                    <td>
                        <a class="check_serve_btn">${d.serve_code==0?'--':d.serve_code}</a> /
                        <a class="check_serve_btn">${d.actual_serve_code==0?'--':d.actual_serve_code}</a>
                    </td>
                </tr>`
      })
      $('#table tbody').html(html)
      callback && callback()
    }
  })
}
function init () {
  getDataList(function () {
    $('#pagination').pagination({
      pageCount: Math.ceil(total / size),
      jump: true,
      coping: true,
      keepShowPN: true,
      prevContent: '«',
      nextContent: '»',
      jumpBtnCls: 'am-btn am-btn-primary',
      activeCls: 'am-active',
      callback: function (api) {
        page = api.getCurrent().toString()
        getDataList()
      }
    });
  })
}
init()
$('#searchBtn').click(function (e) {
  e.preventDefault()
  search = $('#search').val().toString()
  page = '1'
  init()
})
//查询服务商信息
$('body').on('click','.check_serve_btn',function (e) {
  e.preventDefault()
  let serve_code=$(this).text()
  if(serve_code==='--') return false;
   var loading = layer.load(1, {
    shade: [0.1,'#fff'] //0.1透明度的白色背景
  });
  AjaxRequest({
    url: '/admin/serve_info/',
    data: {serve_code},
    succFun: function (res) {
      var data= res.data
      $('#name').html(data.name||'--')
      $('#username').html(data.username||'--')
      $('#institution_name').html(data.institution_name||'--')
      layer.open({
        type: 1,
        width:300,
        title: false, //不显示标题
        content: $('#serveContent'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        cancel: function(){
        }
      });
    },
    complete:function () {
      layer.close(loading)
    }
  })

})
</script>
</html>